<template>
  <div style="padding:0 17px">
    <Breadcrumb/>
    <div style="display: flex;margin-top: 15px;">
      <el-button type="primary" style="margin-right: 15px" @click="addItem">新增</el-button>
      <span style="min-width: 150px;margin-right: 15px">
        <OrganizationTree
                @change="load"
                @tree-select-changed="treeSelectChanged"
                v-model="selectedOrganizationId"
        />
      </span>
      <el-input v-model="keyWord" placeholder="单位名称/预案演练组名称"
                style="width: 200px;height: 33px;margin-right: 15px;font-size: 13px;" clearable></el-input>
      <el-button icon="Search" type="primary" style="color: #fff;font-size: 12px;background-color: #1890ff;" @click="load">搜索
      </el-button>
      <el-button type="success" style="" @click="importData">导入</el-button>
      <el-button type="success" style="" @click="exportData">导出</el-button>
    </div>

    <el-table :data="tableData" :row-style="{ height: '77px' }" border
              style="width: calc(100vw - 240px);margin-top: 20px;height: 70vh;color: #909399;font-size: 15px;">
      <el-table-column prop="id" label="ID" width="100"/>
      <el-table-column prop="clientName" label="单位名称" width="200"/>
      <el-table-column prop="teamName" label="预案演练组名称" width="200"/>
      <el-table-column prop="teamType" label="类型" width="auto"/>
      <el-table-column prop="state" label="状态" width="auto"/>
      <el-table-column prop="teamLeader" label="组长" width="auto"/>
      <el-table-column prop="leaderTel" label="联系方式" width="250"/>
      <el-table-column prop="teamSecLeader" label="副组长" width="auto"/>
      <el-table-column prop="secLeaderTel" label="联系方式" width="250"/>
      <el-table-column prop="function" label="主要职责" width="350"/>
      <el-table-column align="center" label="操作" fixed="right" width="180">
        <template v-slot="scope">
          <el-button type="primary" size="small" icon="Edit" @click="editItem(scope.row)">编辑</el-button>
          <el-button v-if="this.userInformation.role === 1" type="danger" size="small" icon="Delete" @click="deleteItem(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :background="true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
    <el-dialog title="预案小组新增" v-model="operationItemDialog" :close-on-click-modal="false" :show-close="false"
               width="700">
      <el-form label-position="top" :inline="true" :model="form" ref="form" :rules="rules">
        <el-form-item label="预案组名称" prop="teamName">
          <el-input placeholder="预案组名称" v-model="form.teamName"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item style="width: 185px" label="单位名称" prop="clientId">
          <el-select v-model="form.clientId" filterable placeholder="选择单位名称">
            <el-option
                v-for="item in clientOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预案组类型" prop="teamType">
          <el-input placeholder="预案组类型" v-model="form.teamType"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-input placeholder="状态" v-model="form.state"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="组长" prop="teamLeader">
          <el-input placeholder="组长" v-model="form.teamLeader"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="leaderTel">
          <el-input placeholder="联系方式" v-model="form.leaderTel"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="副组长" prop="teamSecLeader">
          <el-input placeholder="副组长" v-model="form.teamSecLeader"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="secLeaderTel">
          <el-input placeholder="联系方式" v-model="form.secLeaderTel"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="组员" prop="teamPerson">
          <el-input placeholder="组员" v-model="form.teamPerson"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="teamPersonTel">
          <el-input placeholder="联系方式" v-model="form.teamPersonTel"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label-width="110" label="主要职责" prop="function">
          <el-input placeholder="主要职责" v-model="form.function"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="任务" prop="task">
          <el-input placeholder="任务" v-model="form.task"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reset('form')">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="导入" v-model="dialogImportVisible" width="520px">
      <el-form label-position="right" label-width="100px">
        <el-form-item label="模板下载:" padding-top:10px>
          <el-button type="primary" size="small" style="" @click="exportTemplate">应急预案小组</el-button>
        </el-form-item>
        <el-form-item label="文件" padding-top:-20px>
          <el-upload :headers="headers"
                           :multiple="false"
                     :on-success="onUploadSuccess"
                     :on-error="onUploadError"
                     :action="serverIp+'/conting-plan-team/importData'"
                     class="upload-demo">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传xlsx文件</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogImportVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request.js";
import Breadcrumb from "@/components/Breadcrumb.vue";
import OrganizationTree from "@/components/OrganizationTree.vue";
import {serverIp} from "../../../public/static/config"

export default {
  name: "ContingPlanTeam",
  components: {Breadcrumb,OrganizationTree},
  data() {
    return {
      serverIp,
                headers: {
                    token:  JSON.parse(localStorage.getItem('user')).token,
                },
      dialogImportVisible: false,
      userInformation: JSON.parse(localStorage.getItem("user")),
      selectedOrganizationId: JSON.parse(localStorage.getItem("user")).organization,
      keyWord:'',
      searchType:'',
      typeOptions:[
        {
          value: '0',
          label: '1'
        }, {
          value: '1',
          label: '11'
        }, {
          value: '2',
          label: '111'
        }
      ],
      teamName: "",
      groupName:'',
      currentData: {},
      tableData: [],
      clientOptions: [],
      searchClient: "",
      currentPage: 1,
      pageSize: 10,
      total: 0,
      operationItemDialog: false,  // 弹窗
      form: {},
      rules: {
        teamName: [
          {required: true, message: '请输入预案组名称', trigger: 'blur'},
        ],
        clientId: [
          {required: true, message: '请选择单位名称', trigger: 'blur'},
        ],
        teamLeader: [
          {required: true, message: '请输入组长姓名', trigger: 'blur'},
        ],
      },
      isEdit: false,
    }
  },
  mounted() {
    // 初始化加载用户数据
    this.load()
    this.getClientOptions()
  },
  methods: {
    importData() {
      this.dialogImportVisible = true;
    },
    onUploadSuccess() {
      this.$message.success('上传成功');
      this.dialogImportVisible = false;
      location.reload();
    },
    onUploadError(){
      this.$message.error('上传失败');
    },
    // 模板下载
    exportTemplate() {
      window.location.href = '../xlsx/contingPlanTeam.xlsx'
    },
    exportData() {
      let level = JSON.parse(localStorage.getItem("user")).level
      if (this.currentData.level !== undefined) {
        level = this.currentData.level
      }
      let isAllClient = JSON.parse(localStorage.getItem("user")).isAllClient;
      let clientIds;
      if (isAllClient === "1") {
        clientIds = JSON.parse(localStorage.getItem("user")).clientIds;
      } else {
        clientIds = [];
      }
      window.open(serverIp + '/conting-plan-team/export?keyWord=' + this.keyWord +
          "&level=" + level + "&organizationId=" + this.selectedOrganizationId + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds);
    },
    // 搜索
    load() {
      let level = JSON.parse(localStorage.getItem("user")).level
      if (this.currentData.level !== undefined) {
        level = this.currentData.level
      }
      let isAllClient = JSON.parse(localStorage.getItem("user")).isAllClient;
      let clientIds;
      if (isAllClient === "1") {
        clientIds = JSON.parse(localStorage.getItem("user")).clientIds;
      } else {
        clientIds = [];
      }
      // if (this.searchClient === "undefined") {
      //     this.searchClient = "";
      // }
      request.get("/conting-plan-team/page?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize + "&keyWord=" + this.keyWord +
          "&level=" + level + "&organizationId=" + this.selectedOrganizationId + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds).then(res => {
        if (res.code === '200') {
          for (let key in res.data) {
            if (key === "record") {
              this.tableData = res.data[key];
            } else if (key === "total") {
              this.total = res.data[key];
            }
          }
        } else {
          this.$message.error("错误" + res.msg)
        }
      })
    },
    getClientOptions() {
      let level = JSON.parse(localStorage.getItem("user")).level
      let organizationId = JSON.parse(localStorage.getItem("user")).organization
      let isAllClient = JSON.parse(localStorage.getItem("user")).isAllClient;
      let clientIds;
      if (isAllClient === "1") {
        clientIds = JSON.parse(localStorage.getItem("user")).clientIds;
      } else {
        clientIds = [];
      }
      request.get("/client/listbyName?name=" + this.searchClient + "&organizationId=" + organizationId + "&level=" + level + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds).then(res => {
        this.clientOptions = res.data
      })
    },
    // 新增
    addItem() {
      this.operationItemDialog = true
    },
    // 编辑
    editItem(scope) {
      this.isEdit = true;
      Object.assign(this.form, scope)
      this.operationItemDialog = true
    },
    // 编辑、新增确定按钮
    submitForm(val) {
      this.form.operatorId = JSON.parse(localStorage.getItem("user")).id
      this.$refs[val].validate((valid) => {
        if (valid) {
          request.post("/conting-plan-team/edit", this.form).then(res => {
            if (res.code === '200') {
              this.$message({
                message: "成功",
                type: "success"
              })
              this.load()
              if (!this.isEdit) {
                this.clearConditions()
              }
              this.reset(val)
            } else {
              this.$message.error("操作失败" + res.msg)
            }
          })
        }
      })
    },
    // 清空查询条件
    clearConditions() {
      this.selectedOrganizationId = JSON.parse(localStorage.getItem("user")).organization;
      this.teamName = "";
      this.groupName = "";
    },
    reset(val) {
      this.isEdit = false;
      this.operationItemDialog = false;
      this.form = {};
      this.$refs[val].clearValidate();
    },
    // 删除确定弹窗
    deleteItem(scope) {
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.delete("/conting-plan-team/delete/" + scope).then(res => {
          if (res.code === '200') {
            this.$message.success("成功")
            this.load()
          } else {
            this.$message.error(res.msg)
          }
        })
      });
    },
    treeSelectChanged(data) {
      this.currentData = data
    },
    handleSizeChange(pageSize) {   // 改变当前每页的个数触发
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {  // 改变当前页码触发
      this.currentPage = pageNum
      this.load()
    },
  }
}
</script>

<style scoped>
:deep(.el-table th .cell) {
  font-weight: 700
}

:deep(.el-select-dropdown__item) {
  font-size: 14px;
}

:deep(.el-select__wrapper) {
  font-size: 14px;
}
</style>
